<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        新增银行卡
      </el-button> -->
    </div>

    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>基本信息</span>


      </div>
      <div>
        <el-row>
          <el-col :span="8">
            <div class="grid-content ">
              姓名：{{ oil.name }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              手机号：{{ oil.phone }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content ">
              车牌：{{ oil.vehicle }}
            </div>
          </el-col>
           <!--<el-col :span="6">-->
            <!--<div class="grid-content ">-->
              <!--审核状态： {{ oil.state | stateFilter }}-->

            <!--</div>-->
          <!--</el-col>-->
        </el-row>

      </div>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:20px"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>已购买油卡列表</span>
      </div>
      <div>
        <el-table
          :key="key"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <!-- <el-table-column
        prop="author"
        label="序号"
        align="center"
        width="80"
        value="scope.$index + 1"
      /> -->
          <el-table-column
            prop="cardNum"
            label="卡号"
            align="center"
            width=""
          />
            <el-table-column
            prop="sourceId"
            label="类型"
            align="center"
            width=""
          >
              <template slot-scope="scope">
                {{ scope.row.sourceId | typeFilter1 }}
              </template>

          </el-table-column>
          <el-table-column
            prop="buyTime"
            label="购买时间"
            align="center"
            width=""
          />
          <el-table-column
            prop="payMoney"
            label="累计充值金额"
            align="center"
            width=""
          />
          <el-table-column
            prop="name"
            label="姓名"
            width=""
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="idCard"
            label="身份证"
            align="center"
            width=""
          />

          <el-table-column
            prop="vehicleLicense"
            label="行驶证"
            min-width=""
            align="center"
          />

        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />

    </el-card>
    <el-dialog
      title="支付信息"
      :visible.sync="dialogPay"
      top="10vh"
    >
      <el-form
        ref="pay"
        :rules="rules"
        :model="pay"
        label-position="left"
        label-width="200px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="支付方式">
          <el-radio-group v-model="pay.payType">
            <el-radio :label="1">京东支付</el-radio>
            <el-radio :label="2">浦发支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="京东商户号"
          prop=""
        >
          <el-input v-model="pay.jdMrchNo" />
        </el-form-item>
        <el-form-item
          label="浦发商户号"
          prop=""
        >
          <el-input v-model="pay.pfMrchNo" />
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogPay = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="editPayDo"
        >
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogCode"
      title="站点二维码"
      style="text-align:center"
    >
      <!-- <qrCode :codeVal="codeVal"></qrCode> -->
      <img
        :src="imageUrl"
        alt=""
      >
    </el-dialog>

  </div>
</template>
<script>
import { tradesList, oilDeatil, getCode, editPay,getAllByUserId } from '@/api/v1'
import { resetPassword, cooperationUnBind } from '@/api/user'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { parseTime } from '@/utils'
import { MessageBox, Message } from 'element-ui'
import { Loading } from 'element-ui'

export default {
  directives: { waves },
  components: { Pagination },
   filters: {
    stateFilter(role) {
      //是否高挂 1是   2否
      switch (role) {
        case 1:
          return "审核中";
        case 3:
          return "审核成功";
      }
    },
     typeFilter1(role) {    //是否高挂 1是   2否
       switch (role) {
         case 1:
           return "中石油";
         case 2:
           return "中石化";
       }
     },
  },
  data() {
    return {
      dialogCode: false,
      dialogPay: false,
      imageUrl: '',
      oil: {},
      tableData: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      cooperation: [],
      listQuery: {
        page: 1,
        limit: 20,
        sort: '+id',
        cooperation: ''
      },
      key: 1, // table key
      dialogFormVisible: false,
      dialogFormMoney: false,
      rules: {
        openName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        cardNum: [{ required: true, message: '请输入卡号', trigger: 'blur' }],
        idCardNum: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ],
        // currentMoney: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        money: [{ required: true, message: '请输入提现金额', trigger: 'blur' }],
        payPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      temp: {
        cardNum: '',
        openName: '',
        idCardNum: '',
        relationId: '', // 省代或油卡商户id–超管添加必传
        relationType: '' // 类型1为省代，2为油卡商户–超管添加必传
      },
      temp1: {
        cardNum: '',
        openName: '',
        idCardNum: '',
        relationId: '', // 省代或油卡商户id–超管添加必传
        relationType: '', // 类型1为省代，2为油卡商户–超管添加必传
        money: ''
      },
      pay: {
        id: '',
        payType: '',
        jdMrchNo: '',
        pfMrchNo: ''
      }
    }
  },
  watch: {
    checkboxVal(valArr) {
      this.formThead = this.formTheadOptions.filter(
        i => valArr.indexOf(i) >= 0
      )
      this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    }
  },

  created() {

          this.oil.name=this.$route.query.name
          this.oil.phone=this.$route.query.phone
          this.oil.state=this.$route.query.state
          this.oil.vehicle=this.$route.query.vehicle


    // this.oilDeatil(data)
    this.getList()
  },
  methods: {
    editPayDo() {
      console.log(this.pay)

      this.$refs['pay'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.pay)
          editPay(tempData).then(() => {
            // for (const v of this.list) {
            //   if (v.id === this.pay.id) {
            //     const index = this.list.indexOf(v);
            //     this.list.splice(index, 1, this.pay);
            //     break;
            //   }
            // }
            this.dialogPay = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.oilDeatil(this.oil)
          })
        }
      })
    },

    paySet() {
      this.pay = this.oil
      this.dialogPay = true
      this.$nextTick(() => {
        this.$refs['pay'].clearValidate()
      })
    },

    oilDeatil(data) {
      oilDeatil(data).then(res => {
        this.oil = res.data
        console.log(this.tableData)
      })
    },


    resetTemp() {
      this.temp.cardNum = ''
      this.temp.openName = ''
      this.temp.idCardNum = ''
    },
    handleCreate() {
      this.resetTemp()
      console.log(this.temp)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    getCode() {
      var query = { phone: this.phone }
      getPhoneCode(query).then(res => {
        Message({
          message: res.msg || 'success',
          type: 'success',
          duration: 2 * 1000
        })
      })
    },

    getList() {
      this.listLoading = true
      this.listQuery.id=this.$route.query.id;
      getAllByUserId(this.listQuery).then(res => {
        this.tableData = res.data.records
        this.total = Number(res.data.total)
        console.log(this.tableData)
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    createData() {
      this.$refs['temp'].validate(valid => {
        if (valid) {
          console.log(this.temp)
          addBankCard(this.temp).then(res => {
            // this.list.unshift(this.temp);
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: res.msg,
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

